<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/search.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/pagination.css">
    <script src="../js/cookie.js"></script>
    <!-- <script src="../js/ajax.js"></script> -->
    <script src="../js/api.js"></script>
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/jquery.pagination.js"></script>
</head>

<body>
    <!-- hello -->
    <div class="tips">
        <a href="./register.html">注册</a>
        <a href="./login.html">登录</a>
    </div>
    <a href="../html/goodsList.html">列表</a>
    <div class="wrapAll w">
        <!-- 搜索框 -->
        <form class="search_bar" onsubmit="return false">
            <div class="searchBox">
                <input type="text" class="searchCon">
                <button class="searchBtn">搜索</button>
            </div>
            <div class="orderBox">
                <!-- 排序的列(column)名 (id,chinese,math,english,total) -->
                <div class="orderColBox">
                    <label>
                        学号
                        <input type="radio" checked name="orderCol" class="orderCol" value="id">
                    </label>
                    <label>
                        语文
                        <input type="radio" name="orderCol" class="orderCol" value="chinese">
                    </label>
                    <label>
                        数学
                        <input type="radio" name="orderCol" class="orderCol" value="math">
                    </label>
                    <label>
                        英语
                        <input type="radio" name="orderCol" class="orderCol" value="english">
                    </label>
                    <label>
                        总分
                        <input type="radio" name="orderCol" class="orderCol" value="total">
                    </label>
                </div>
                <!-- 排序的类型  升序 / 降序 -->
                <div class="orderTypeBox">
                    <label>
                        升序
                        <input type="radio" checked name="orderType" class="orderType" value="asc">
                    </label>
                    <label>
                        降序
                        <input type="radio" name="orderType" class="orderType" value="desc">
                    </label>
                </div>
                <div class="showNumBox">
                    <select class="select">
                        <option value="5" selected>每页显示05条</option>
                        <option value="10">每页显示10条</option>
                        <option value="15">每页显示15条</option>
                        <option value="20">每页显示20条</option>
                    </select>
                </div>
                <input type="reset" class="resetBtn" value="重置">
            </div>
        </form>
        <!-- 表格 -->
        <div class="wrapTable">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>班级</th>
                        <th>语文</th>
                        <th>数学</th>
                        <th>英语</th>
                        <th>总分</th>
                        <th>编辑</th>
                        <th>删除</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                        <td>04</td>
                        <td>05</td>
                        <td>06</td>
                        <td>07</td>
                        <td>08</td>
                        <td>09</td>
                    </tr> -->
                </tbody>
            </table>
        </div>
        <div class="pageBox">
            <!-- <button class="prev">上一页</button>
            <span class="pageTips">1/10</span>
            <button class="next">下一页</button> -->
        </div>
    </div>

    <div class="shadow">
        <form class="detail" action="" autocomplete="off" onsubmit="return false">
            <p><label>编号:<input type="text" name="id" disabled></label></p>
            <p><label>姓名:<input type="text" name="name" disabled></label></p>
            <p><label>班级:<input type="text" name="class" disabled></label></p>
            <p><label>语文:<input type="text" name="chinese"></label></p>
            <p><label>数学:<input type="text" name="math"></label></p>
            <p><label>英语:<input type="text" name="english"></label></p>
            <p><button class="subBtn">确定</button><button class="canBtn">取消</button></p>
        </form>
    </div>

</body>
<script>
    var cookie = document.cookie;
    var tips = document.getElementsByClassName("tips")[0];
    var tbody = document.querySelector(".wrapTable tbody");
    var shadow = document.querySelector(".shadow");
    var subBtn = document.querySelector(".subBtn");
    var canBtn = document.querySelector(".canBtn");

    // 搜索
    var searchBar = document.querySelector(".search_bar");
    var searchCon = document.querySelector(".searchCon");
    var select = document.querySelector(".select");

    // 分页
    var prev = document.querySelector(".prev");
    var pageTips = document.querySelector(".pageTips");
    var next = document.querySelector(".next");

    // 通过表单获取元素   (表单可以通过name规定的字段名 获取对应的元素)
    var form = document.querySelector(".shadow form");
    // console.log(form);

    // console.log(form.id);
    // console.log(form.name);
    // console.log(form.class);


    if (cookie) {
        var user = getCookie("lgc");
        if (user) {
            tips.innerHTML = `欢迎您,${user} <button onclick="exit()">退出</button>`;
        }
    }

    // 全局变量 记录默认值 (点击时切换对应的值)
    var key = "";   // 默认搜索所有数据
    var orderCol = "id"; //默认按照学号排序
    var orderType = "asc"; //默认升序
    var pageIndex = 1; // 默认显示第一页
    var showNum = 5;   // 默认每页显示五条


    // 页面加载时 动态生成
    loadPage();   // key=""  =>搜索所有数据



    searchCon.oninput = function () {
        key = this.value.trim();
    }
    select.onchange = function () {
        showNum = this.value * 1;
        // pageIndex = 1;    //为防止showNum (5->10->15->20)  pageIndex不变超出最大值的问题 每次切换改为第一页
        loadPage();
    }

    searchBar.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;

        if (target.className == "searchBtn") {
            key = searchCon.value.trim();
            loadPage();
        } else if (target.className == "orderCol") {
            orderCol = target.value;
            console.log(orderCol);
            loadPage();
        } else if (target.className == "orderType") {
            orderType = target.value;
            console.log(orderType);
            loadPage();
        } else if (target.className == "resetBtn") {
            key = "";   // 默认搜索所有数据
            orderCol = "id"; //默认按照学号排序
            orderType = "asc"; //默认升序
            pageIndex = 1; // 默认显示第一页
            showNum = 5;   // 默认每页显示五条

            // 页面加载时 动态生成
            loadPage();   // key=""  =>搜索所有数据

        }
    }


    // 事件委托
    tbody.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (target.className == "del") {
            // console.log(target);
            if (confirm("是否删除该数据?")) {
                var tr = target.parentElement.parentElement;
                var id = tr.getAttribute("data-id");
                console.log(id);

                var xhr = new XMLHttpRequest();

                xhr.open("get", `../php/deleteGradeById.php?id=${id}`, true);

                xhr.send();

                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var { status, detail } = JSON.parse(xhr.responseText);
                        if (status) {
                            // tr.remove();
                            loadPage();
                        } else {
                            alert("detail");
                        }
                    }
                }



            }


        } else if (target.className == "edit") {
            // console.log(target);
            shadow.style.display = "block";

            var tr = target.parentElement.parentElement;
            var id = tr.getAttribute("data-id");

            // console.log(id);


            var xhr = new XMLHttpRequest();

            xhr.open("get", `../php/searchGradeById.php?id=${id}`, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var { status, data } = JSON.parse(xhr.responseText);
                    console.log(data);
                    if (status) {

                        // form.id.value = data.id;
                        // form.name.value = data.name;
                        // form.class.value = data.class;
                        // form.chinese.value = data.chinese;
                        // form.math.value = data.math;
                        // form.english.value = data.english;

                        for (var key in data) { // "id" "name"
                            form[key].value = data[key];
                        }

                    }

                }
            }
        }
    }


    subBtn.onclick = function () {
        var id = form.id.value;
        var chinese = form.chinese.value;
        var math = form.math.value;
        var english = form.english.value;


        var xhr = new XMLHttpRequest();

        xhr.open("post", `../php/updateGradeById.php`, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        xhr.send(`id=${id}&chinese=${chinese}&math=${math}&english=${english}`);

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
                var { status, detail } = JSON.parse(xhr.responseText);
                // console.log(data);
                if (status) {
                    shadow.style.display = "none";
                    loadPage();
                }
            }
        }
    }

    canBtn.onclick = function () {
        shadow.style.display = "none";
    }


    function exit() {
        delCookie("lgc");
        location.reload();
    }


    // 前端分页
    // 原理:借助数组的slice() 对原数组进行裁切



    // 后端分页流程
    // 1. 页面加载时 动态生成(页码展示)
    // 2. 上下页切换     动态生成(页码展示)
    // 3. 判断是否超出最大页  为防止showNum (5->10->15->20)  pageIndex不变超出最大值的问题 每次切换改为第一页

    // 总结:
    // 当数据量比较少,且需要进行频繁的切换时 需要时用前端分页
    // 当数据量比较多,需要使用后端分页
    function loadPage() {
        searchGradeOrderLimit({ key, orderCol, orderType, pageIndex, showNum }).then((data) => {
            console.log(data);
            var { status, detail, count, maxPage, list } = data;
            if (status) {

                var html = "";
                list.forEach(({ id, name, class: _class, chinese, english, math, total }, index) => {
                    html += `<tr data-id="${id}">
                    <td>${(index + 1) + showNum * (pageIndex - 1)}</td>
                    <td>${name}</td>
                    <td>${_class}</td>
                    <td>${chinese}</td>
                    <td>${math}</td>
                    <td>${english}</td>
                    <td>${total}</td>
                    <td><a class="edit" href="javascript:;">编辑</a></td>
                    <td><a class="del" href="javascript:;">删除</a></td>
                </tr>`
                })
                tbody.innerHTML = html;

                $(".pageBox").pagination({
                    totalData: count,
                    showData: showNum,
                    current: pageIndex,
                    mode: "fixed",
                    count: 4,

                    coping: true,
                    homePage: '首页', //首页节点内容
                    endPage: '尾页', //尾页节点内容

                    prevContent: '上一页', //上一页内容
                    nextContent: '下一页', //下一页内容

                    isHide: true,
                    jump: true, //跳转到指定页数
                    jumpBtn: 'Go', //跳转按钮文本

                    callback: function (api) {  // 页码改变回调
                        console.log(api); // 得到一个当前分页的实例化对象
                        console.log(api.getCurrent());  //获取当前页码
                        pageIndex = api.getCurrent();  //赋值给全局的pageIndex
                        loadPage();
                    }
                })


            } else {
                tbody.innerHTML = `<tr><td colspan="9">暂无数据</td></tr>`;
            }
        }).catch(err => {
            throw err;
        })
    }

    /*  function loadPage() {
         $.ajax({
             type: "get",
             url: "../php/searchGradeOrderLimit.php",
             data: {
                 // 找全局的
                 key,
                 orderCol,
                 orderType,
                 pageIndex,
                 showNum,
             },
             dataType: "json",
             success: function (data) {
                 console.log(data);
                 var { status, detail, count, maxPage, list } = data;
                 if (status) {

                     // 如果超出最大页  就是显示最大页
                     pageIndex = pageIndex >= maxPage ? maxPage : pageIndex;
                     pageTips.innerHTML = `${pageIndex}/${maxPage}`;

                     var html = "";
                     list.forEach(({ id, name, class: _class, chinese, english, math, total }, index) => {
                         html += `<tr data-id="${id}">
                     <td>${(index + 1) + showNum * (pageIndex - 1)}</td>
                     <td>${name}</td>
                     <td>${_class}</td>
                     <td>${chinese}</td>
                     <td>${math}</td>
                     <td>${english}</td>
                     <td>${total}</td>
                     <td><a class="edit" href="javascript:;">编辑</a></td>
                     <td><a class="del" href="javascript:;">删除</a></td>
                 </tr>`
                     })
                     tbody.innerHTML = html;

                     prev.onclick = function () {
                         if (pageIndex <= 1) return false;
                         pageIndex--;
                         loadPage();
                     }

                     next.onclick = function () {
                         if (pageIndex >= maxPage) return false;
                         pageIndex++;
                         loadPage();
                     }


                 } else {
                     tbody.innerHTML = `<tr><td colspan="9">暂无数据</td></tr>`;
                 }
             }
         })
     } */

</script>

</html>